<template>
  <div class="lin_region">
    <div class="lin_region_list">
      <ul>
        <li>
          <a href="#">
            <img src="https://static.insta360.com/assets/storage/20200415/5dcca8dd62b5ac5d7b910ba9ec84e860/en_us_2x.png">
            <span>English</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://static.insta360.com/assets/storage/20200415/04b74473bfeb4f3c3fdfe3b6f2b9cb47/de_de_2x.png">
            <span>Deutsch</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://static.insta360.com/assets/storage/20200415/7f273ad2c55876014e4375d5752c971e/zh_cn_2x.png">
            <span>简体中文</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://static.insta360.com/assets/storage/20200415/36f06d157ee85ccf4017d567db7f3fd5/ja_jp_2x.png">
            <span>日本語</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://static.insta360.com/assets/storage/20200415/0fb3455324cd5d3b0190f913f11cb635/es_es_2x.png">
            <span>Español</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://static.insta360.com/assets/storage/20200415/5dcca8dd62b5ac5d7b910ba9ec84e860/en_us_2x.png">
            <span>English</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://static.insta360.com/assets/storage/20200415/185daf537b33fb295c776c815b480786/ko_kr_2x.png">
            <span>한국어</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://static.insta360.com/assets/storage/20200415/64fd9535245e2734c37100e3c36dfebe/fr_fr_2x.png">
            <span>Français</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://static.insta360.com/assets/storage/20200415/14cda7e8ee23c79f22a0f14cd7c77161/it_it_2x.png">
            <span>Italiano</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://static.insta360.com/assets/storage/20200415/2140a2ecb0ed394637537058b88934e7/ru_ru_2x.png">
            <span>Русский</span>
          </a>
        </li>
      </ul>
    </div>
  </div>

</template>



<style scoped>
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

.lin_region {
  position: relative;
  justify-content: center;
  height: 310px;
  width: auto;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
  text-align: left;
}


.lin_region_list ul {
  position: absolute;
  text-align: center;
  transition: all 1.5s;
  text-align: left;
}

.lin_region_list ul li {
  width: 100px;
  height: 30px;
  line-height: 38px;
}

.lin_region_list ul li a {
  height: 50px;
  width: 100%;
}

.lin_region_list ul li:hover {
  background-color: rgb(216, 216, 216);
  transform: scale(1.1);
}

.lin_region_list ul li img {
  height: 17px;
  margin-right: 10px;
}

.lin_region_list ul li span {
  top: -4px;
  font-size: 13px;
}
</style>